<template>
	<view>
		<view class="video_top">
			<view class="padding-x-30 padding-top-80 flex align-center justify-between">
			<!-- 	<view @click="toZhibo()">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/img/zhibo.png"></image>
				</view> -->
				<!-- justify-center -->
				<view class="flex align-center  color-fff fs-28 nav flex1">
					<text class="margin-right-30" @click="changeType('recommend')"	:class="type == 'recommend' ?'on':''">推荐</text>
					<text class="margin-right-30" @click="changeType('region')"  :class="type == 'region' ?'on':''">本地</text>
					<text class="margin-right-30" @click="changeType('hot')"  :class="type == 'hot' ?'on':''">热点</text>
					<!-- <text @click="changeType('zhibo')" :class="type == 'zhibo' ?'on':''">直播</text> -->
				</view>
				<!--  -->
				<view class="w30 flex align-center justify-between radius48 padding-x-24"
					style="background: rgba(255,255,255,0.4);">
					<input v-model="q.search" @confirm="search()" type="text" class="fs-26 color-fff flex1" style="height: 50rpx;">
					<image src="../../static/img/srh.png" style="width: 36rpx;height: 36rpx;"></image>
				</view>
			</view>
		</view>
		
		<!-- 视频列表 -->
		<view v-if="type != 'zhibo'"  class="radius-top30 padding-top-20 bg-fff" style="margin-top: -110rpx;">
			<view class="flex align-center justify-between flex-wrap padding-x-24">
				<view @click="jump('/pages/video/detail?id='+item.id)" v-for="(item,index) in list" :key='index'
					class="video_item relative radius10 margin-bottom-30">
					<image :src="item.thumb" class="bg_img"></image>
					<view class="absolute padding-20 flex  justify-between flex-direction"
						style="width: 100%;height: 100%;top: 0;">
						<view class="flex align-center justify-end">
							<view class="flex align-center radius48"
								style="padding: 4rpx 8rpx;background: rgba(102, 102, 102, 0.2);">
								<image src="../../static/img/man.png" style="width: 26rpx;height: 26rpx;"></image>
								<text class="fs-22 color-fff">{{item.player}}</text>
							</view>
						</view>
						<view class="flex align-center">
							<image :src="item.avatar" style="width: 66rpx;height: 66rpx;border-radius: 100%;"></image>
							<view class="margin-left-20" style="width: 68%;">
								<view class="fs-26 color-fff opacity7">{{item.name}}</view>
								<!-- <view class="fs-22 color-fff opacity7 text-cut" style="margin-top: 6rpx;">没有人能随随便便成功！</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="w100 bg-fff" style="height: 500rpx;" v-if="list.length < 1">
				<empty></empty>
			</view>

		</view>
		<!-- 视频列表end -->
		
		<!-- 直播列表 -->
		<view v-else  class="radius-top30 padding-top-20 bg-fff" style="margin-top: -110rpx;">
			<view class="flex align-center justify-between flex-wrap padding-x-24">
				<view @click="jump('/pages/video/lookLive?room='+item.room)" v-for="(item,index) in list" :key='index'
					class="video_item relative radius10 margin-bottom-30">
					<image :src="item.thumb" class="bg_img"></image>
					<view class="absolute padding-20 flex  justify-between flex-direction"
						style="width: 100%;height: 100%;top: 0;">
						<!-- <view class="flex align-center justify-end">
							<view class="flex align-center radius48"
								style="padding: 4rpx 8rpx;background: rgba(102, 102, 102, 0.2);">
								<image src="../../static/img/man.png" style="width: 26rpx;height: 26rpx;"></image>
								<text class="fs-22 color-fff">{{item.player}}</text>
							</view>
						</view> -->
						<view class="flex align-center">
							<image :src="item.avatar" style="width: 66rpx;height: 66rpx;border-radius: 100%;"></image>
							<view class="margin-left-20" style="width: 68%;">
								<!-- <view class="fs-26 color-fff opacity7">{{item.name}}</view> -->
								<!-- <view class="fs-22 color-fff opacity7 text-cut" style="margin-top: 6rpx;">没有人能随随便便成功！</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="w100 bg-fff" style="height: 500rpx;" v-if="list.length < 1">
				<empty></empty>
			</view>
		
		</view>
		<!-- 直播列表end -->

		<!--申请主播 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>


	</view>
</template>

<script>
	import DialogBox from '../../components/DialogBox/DialogBox.vue'
	export default {
		components: {
			DialogBox
		},
		data() {
			return {
				q: {
					search: '',
					page: 1
				},
				hasMore: true,
				loadStatus: '',
				list: [],
				type: 'recommend',
				userInfo: {}
			}
		},
		onLoad() {
			this.getCommend();
		},
		onShow() {
			this.getInfo()
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				if (this.type == 'recommend') {
					this.getCommend();
				}
				if (this.type == 'region') {
					this.getRegion();
				}
				if (this.type == 'hot') {
					this.getHot();
				}
			}
		},
		methods: {
			getInfo() {
				this.$api.material().then(res => {
					if (res.code == 1) {
						this.userInfo = res.data.data
					}
				})
			},

			// 推荐
			getCommend() {
				this.isLoading = true;
				this.$api.recommend(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			// 本地
			getRegion() {
				this.isLoading = true;
				this.$api.local(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			// 热点
			getHot() {
				this.isLoading = true;
				this.$api.hot(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			// 直播
			getZhibo() {
				this.isLoading = true;
				this.$api.room_list(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			changeType(type) {
				this.type = type;
				this.q.page = 1;
				this.list = [];
				if (type == 'recommend') {
					this.getCommend();
				}
				if (type == 'region') {
					this.getRegion();
				}
				if (type == 'hot') {
					this.getHot();
				}
				if(type == 'zhibo'){
					this.getZhibo()
				}
			},


			toZhibo() {
				var that = this;
				if (this.userInfo.is_liver == 0) {
					that.$refs['DialogBox'].confirm({
						title: '提示',
						content: '请先申请成为主播,是否申请?',
						DialogType: 'inquiry',
						animation: 0
					}).then(() => {
						that.$api.apply_live().then(res => {
							that.$msg(res.msg)
							if (res.code == 1) {
								that.userInfo.is_liver = 1;
							}
						})
					})
				}else{
					uni.navigateTo({
						url:'/pages/video/Play'
					})
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		text {
			padding-bottom: 6rpx;
		}
	}

	.on {
		border-bottom: 1rpx solid #fff;
		font-size: 32rpx;
	}

	.video_top {
		background: linear-gradient(to bottom, #FF7B00, #FCBA72, #FFFFFF);
		height: 300rpx;
	}

	.video_item {
		width: 49%;
		margin-right: 2%;
		height: 470rpx;
	}

	.video_item:nth-child(2n+2) {
		margin-right: 0;
	}

	.bg_img {
		width: 100%;
		height: 470rpx;
	}
</style>
